<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			margin-top: 1000px;
			width: 200px;
			height: 200px;
			border: 1px solid red;
			animation: myfirst 5s ;
			animation-play-state: paused;
		}
		@keyframes myfirst
		{
		0%   {background: red; left:0px; top:0px;}
		25%  {background: yellow; left:200px; top:0px;}
		50%  {background: blue; left:200px; top:200px;}
		75%  {background: green; left:0px; top:200px;}
		100% {background: red; left:0px; top:0px;}
		}

		@-moz-keyframes myfirst /* Firefox */
		{
		0%   {background: red; left:0px; top:0px;}
		25%  {background: yellow; left:200px; top:0px;}
		50%  {background: blue; left:200px; top:200px;}
		75%  {background: green; left:0px; top:200px;}
		100% {background: red; left:0px; top:0px;}
		}

		@-webkit-keyframes myfirst /* Safari 和 Chrome */
		{
		0%   {background: red; left:0px; top:0px;}
		25%  {background: yellow; left:200px; top:0px;}
		50%  {background: blue; left:200px; top:200px;}
		75%  {background: green; left:0px; top:200px;}
		100% {background: red; left:0px; top:0px;}
		}

		@-o-keyframes myfirst /* Opera */
		{
		0%   {background: red; left:0px; top:0px;}
		25%  {background: yellow; left:200px; top:0px;}
		50%  {background: blue; left:200px; top:200px;}
		75%  {background: green; left:0px; top:200px;}
		100% {background: red; left:0px; top:0px;}
		}
	</style>
</head>
<body>
<div></div>
</body>
</html>